/**
 * 系统设置
 * **/

import React, {Component} from 'react';
import {connect} from 'dva';
import Container from '../../components/Container'
import Filtrate from '../../components/Filtrate'
import MyTable from '../../components/MyTable'
import config from '../../config'
import MyIcon from '../../components/MyIcon'
import MyModel from '../../components/MyModel'
import {Modal, Row, Col, Input, Form} from 'antd';
import './system.less'


class System extends Component {
  state = {

  };

  onSelectChange(selectedRowKeys) {
    this.setState({selectedRowKeys});
  }

  modalCancel() {
    this.props.dispatch({type: 'system/saveInfo', payload: {isVisible: false}})
  }

  modalSave(params) {
    console.log(params);
  }

  addHandle() {
    this.props.dispatch({type: 'system/saveInfo', payload: {isVisible: true}})
  }

  deleteHandle() {
    console.log('删除')
  }
  read(){

  }
  edit(){

  }
  render() {
    let t = this;
    let dataSource = [
      {
        key: '1'
      },
      {
        key: '2'
      },
      {
        key: '3'
      },
      {
        key: '4'
      },
      {
        key: '5'
      },
      {
        key: '6'
      },
      {
        key: '7'
      },
      {
        key: '8'
      },
      {
        key: '9'
      },
      {
        key: '10'
      },
      {
        key: '11'
      },
      {
        key: '12'
      },
      {
        key: '13'
      },
      {
        key: '14'
      },
      {
        key: '15'
      },
      {
        key: '16'
      },
    ];
    let rowSelection = {
      onChange: this.onSelectChange.bind(this),
    };
    let columns = [
      {
        dataIndex: 'userName',
        key: 'userName',
        title: '账号',
        width: 150
      },
      {
        dataIndex: 'name',
        key: 'name',
        title: '姓名',
        width: 150
      },
      {
        dataIndex: 'roleName',
        key: 'roleName',
        title: '角色',
        width: 150
      },
      {
        dataIndex: 'department',
        key: 'department',
        title: '部门',
        width: 150
      },
      {
        dataIndex: 'lastLoginIp',
        key: 'lastLoginIp',
        title: '最近登录IP',
        width: 150
      },
      {
        dataIndex: 'lastLoginTime',
        key: 'lastLoginTime',
        title: '最近登陆时间',
        width: 150
      },
      {
        dataIndex: '2',
        key: '2',
        title: '操作',
        width: 150,
        render(text, record) {
          return (
            <div>
              <MyIcon type="icon-chakan" onClick={t.read.bind(t, record)}
                      style={{fontSize: 18, color: '#16b8be', verticalAlign: 'center'}}/>
              <span style={{position: 'relative', bottom: 2}}> | </span>
              <MyIcon type="icon-bianji"
                      onClick={t.edit.bind(t, record)}
                      style={{
                        fontSize: 18,
                        color: '#16b8be',
                        marginLeft: 2
                      }}/>
            </div>
          )
        }
      },

    ];
    let items = [
      {
        type: 'select',
        label: '姓名:',
        placeholder: '请输入 ..',
        paramName: 'name',
        options: [{text: '全部', value: '1'}]
      }
    ];
    let itemsModal= [
      {
        title: '',
        sub: [
          {
            type: 'input',
            label: `账号`,
            paramName: 'userName',
            initialValue: '',
            span: 12,
            width: 210,
            rules: [],
            // addonAfter: '后缀'
          },
          {
            type: 'input',
            label: `密码`,
            paramName: 'password',
            initialValue: '',
            span: 11,
            offset: 1,
            width: 210,
            rules: [],
            // addonAfter: '后缀'
          },
          {
            type: 'input',
            label: `姓名`,
            paramName: 'name',
            initialValue: '',
            span: 12,
            width: 210,
            rules: [],
            // addonAfter: '后缀'
          },
          {
            type: 'input',
            label: `工号`,
            paramName: 'jobNumber',
            initialValue: '',
            span: 11,
            offset: 1,
            width: 210,
            rules: [],
            // addonAfter: '后缀'
          },
          {
            type: 'input',
            label: `电话号码`,
            paramName: 'phone',
            initialValue: '',
            span: 12,
            width: 210,
            rules: [],
            // addonAfter: '后缀'
          },
          {
            type: 'input',
            label: `邮件地址`,
            paramName: 'email',
            initialValue: '',
            span: 11,
            offset: 1,
            width: 210,
            rules: [],
            // addonAfter: '后缀'
          },
          {
            type: 'input',
            label: `所属部门`,
            paramName: 'department',
            initialValue: '',
            span: 12,
            width: 210,
            rules: [],
            // addonAfter: '后缀'
          },
          {
            type: 'input',
            label: `用户岗位`,
            paramName: 'post',
            initialValue: '',
            span: 11,
            offset: 1,
            width: 210,
            rules: [],
            // addonAfter: '后缀'
          },
          {
            type: 'select',
            label: `巡检员`,
            paramName: 'role',
            initialValue: '',
            span: 12,
            width: 210,
            option: [
              {text: '无标签', value: '无标签'},
              {text: '二维码', value: '二维码'},
              {text: 'NFC', value: 'NCF'},
            ],
            rules: [],
            // addonAfter: '后缀'
          },
          {
            type: 'select',
            label: `巡检班次`,
            paramName: 'classes',
            initialValue: '',
            span: 11,
            offset: 1,
            width: 210,
            option: [
              {text: '无标签', value: '无标签'},
              {text: '二维码', value: '二维码'},
              {text: 'NFC', value: 'NCF'},
            ],
            rules: [],
            // addonAfter: '后缀'
          },
          {
            type: 'select',
            label: `专业`,
            paramName: 'professional',
            initialValue: '',
            span: 12,
            width: 210,
            option: [
              {text: '无标签', value: '无标签'},
              {text: '二维码', value: '二维码'},
              {text: 'NFC', value: 'NCF'},
            ],
            rules: [],
            // addonAfter: '后缀'
          }
        ]
      }
    ];
    let height = document.body.clientHeight;
    return (
      <div>
        <Filtrate items={items}/>
        <Container
          addBtnShow
          addBtn={this.addHandle.bind(this)}
          deleteBtnShow
          deleteBtn={this.deleteHandle.bind(this)}
        >
          <MyTable
            columns={columns}
            dataSource={dataSource}
            scroll={{y: height - 317}}
            rowSelection={rowSelection}
            pagination={{
              size: config.size,
              showQuickJumper: true,

            }}
          />
        </Container>
        <MyModel
          title='新增'
          visible={this.props.visible}
          width={590}
          onCancel={this.modalCancel.bind(this)}
          onSave={this.modalSave.bind(this)}
          items={itemsModal}
          editAble={false}
          formItemLayout={{
            labelCol: {span: 24},
            wrapperCol: {span: 24}
          }}
        />
      </div>
    )
  }
}

function mapStateToProps(state) {
  return {
    visible: state.system.isVisible,
  }
}

export default connect(mapStateToProps)(System)


